<template>
    <div class="body-container">
        <!--头部地址选择-->
        <div class="top-banner">
            <div class="banner-title">
                <span>预约{{storeName}}扫描服务</span>
            </div>
        </div>
        <!--body中的预约时间选择器-->
        <div class="content-wrapper">
            <div class="store-title">
                <span class="icon icon-clock"></span>
                <span>预约时间: {{appointDate}}</span>
            </div>
            <div class="appoint-date">
      			<date-picker :value="selectedDate" :inline="true" :disabled="disabled" language="zh"
                v-on:selected="selectedAppointDate(arguments[0])"></date-picker>
    		</div>
            <div v-if="apply" class="appoint-btn-wrapper">
                <button class="btn appoint-btn" @click="applyAppointment">预约</button>
            </div>
            <div v-if="update" class="appoint-btn-wrapper">
                <button class="btn update-btn" v-bind:class="{'disabled': expired}" @click="updateAppointment">修改时间</button>
                <button class="btn delete-btn" @click="deleteAppointment">删除预约</button>
            </div>
            <loading :appear="loading"></loading>
        </div>

        <!--提示语弹框-->
        <div class="layout-mask" v-if="alertShow" @click="alertDismiss">
          <Prompt :show="alertDialogShow" :options="alertDialogOpt" v-on:closed="alertDismiss" v-on:confirm="confirm" :btnCounts="1" v-on:afterLeave="alertDialogClose"></Prompt>
        </div>
    </div>
</template>
<script>
import Config from 'common/script/config.js'
import Datepicker from 'vuejs-datepicker'
import moment from 'moment'
import Loading from 'components/loading/loading'
import Prompt from 'components/prompt/prompt'

var bottons = []
bottons['OK'] = {'text': '确定'}
var defaultDate = new Date()
defaultDate.setDate(defaultDate.getDate() + 1)

export default {
    name: 'appoint',
    data () {
        return {
            loading: true,
            alertShow: false,
            alertDialogShow: false,
            showRegionSelector: false,
            // datepicker 配置项
            selectedDate: defaultDate,
            disabled: {
                to: new Date()
            },
            // 业务信息数据
            appointDate: moment(defaultDate).format('YYYY-MM-DD'),
            appointDatetime: moment(defaultDate).format('YYYYMMDDHHmmss'),
            storeName: '',
            apply: true,
            update: false,
            openId: 0,
            userId: 0,
            storeId: 0,
            appointId: 0,
            expired: false,
            alertDialogOpt: {
                title: '提示',
                msg: '',
                bottons: bottons
            }
        }
    },
    components: {
        'date-picker': Datepicker,
        'Loading': Loading,
        'Prompt': Prompt
    },
    methods: {
        selectedAppointDate: function (appointDate) {
            this.appointDate = moment(appointDate).format('YYYY-MM-DD')
            this.appointDatetime = moment(appointDate).format('YYYYMMDDHHmmss')
            console.log(appointDate)
        },
        // 预约申请
        applyAppointment: function () {
            this.loading = true
            // 预约本店扫描服务
            this.$http.post('/freescan/free/createFreeScannerAppointment', {
                'openId': this.openId,
                'userId': this.userId,
                'freeScannerId': this.storeId,
                'appointmentTime': this.appointDatetime
            }).then((response) => {
                response = response.body
                if (response.code === 1000) {
                    this.alertDialogOpt.msg = '预约成功'
                } else if (response.code === 2) {
                    this.alertDialogOpt.msg = '您已预约了今天本店的预约服务'
                } else {
                    this.alertDialogOpt.msg = 'Sorry, 预约失败'
                }
                this.alertShow = true
                this.alertDialogShow = true
                this.loading = false
            })
        },
        // 更新预约时间
        updateAppointment: function () {
            if (this.expired) {
                return false
            }
            this.loading = true
            // 修改扫描服务时间
            this.$http.post('/freescan/free/updateFreeScannerAppointment', {
                'openId': this.openId,
                'userId': this.userId,
                'freeScannerId': this.storeId,
                'id': this.appointId,
                'appointmentTime': this.appointDatetime,
                'duration': 1
            }).then((response) => {
                response = response.body
                if (response.code === 1000) {
                    this.alertDialogOpt.msg = '修改预约时间成功'
                } else {
                    this.alertDialogOpt.msg = 'Sorry, 修改预约时间失败'
                }
                this.alertShow = true
                this.alertDialogShow = true
                this.loading = false
            })
            console.log('更新预约时间', this.appointDatetime)
        },
        // 删除本次预约
        deleteAppointment: function () {
            this.loading = true
            this.$http.post('/freescan/free/deleteFreeScannerAppointment', {
                'openId': this.openId,
                'userId': this.userId,
                'id': this.appointId
            }).then((response) => {
                response = response.body
                if (response.code === 1000) {
                    window.location.href = 'myAppoint.html?wechatid=' + this.openId + '&userid=' + this.userId
                } else {
                    this.alertDialogOpt.msg = 'Sorry, 删除在本店预约的扫描服务失败了'
                }
                this.alertShow = true
                this.alertDialogShow = true
                this.loading = false
            })
            console.log('删除本次预约')
        },
        alertDismiss: function () {
          this.alertDialogShow = false
        },
        confirm: function () {
          this.alertDialogShow = false
        },
        alertDialogClose: function () {
          this.alertShow = false
        }
    },
    created: function () {
        this.openId = Config.getReqParam('openId')
        this.userId = Config.getReqParam('userId')
        this.appointId = Config.getReqParam('appointId')
        if (Config.getReqParam('appointId')) {
            this.appointId = Config.getReqParam('appointId')
            this.apply = false
            this.update = true
            // 获取预约信息
            this.$http.post('/freescan/appointment/myApply', {
                'openId': this.openId,
                'userId': this.userId,
                'appointmentId': this.appointId
            }).then((response) => {
                this.loading = false
                response = response.body
                if (response.code === 1000) {
                    this.storeId = response.body.freeScannerId
                    this.storeName = response.body.name
                    this.appointDate = moment(response.body.appointmentTime).format('YYYY-MM-DD')
                    this.appointDatetime = moment(response.body.appointmentTime).format('YYYYMMDDHHmmss')
                    this.selectedDate = moment(response.body.appointmentTime).toDate()
                    if (!moment().isBefore(moment(response.body.appointmentTime))) {
                        this.expired = true
                    }
                }
                console.log(response)
            })
        } else {
            this.storeId = Config.getReqParam('storeId')
            this.apply = true
            this.update = false
            // 获取店面信息
            this.$http.post('/freescan/free/getFreeScannerAddressById', {
                'openId': this.openId,
                'userId': this.userId,
                'id': this.storeId
            }).then((response) => {
                this.loading = false
                response = response.body
                if (response.code === 1000) {
                    this.storeName = response.body.name
                }
            })
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin'
.content-wrapper
    .store-title 
    	position absolute 
    	width 100% 
    	top 0 
    	height 40px
    	line-height 40px 
    	padding-left 15px 
    	font-size 14px 
    	border-bottom 1px solid #dcdcdc 
    	box-sizing border-box 
    	.icon-clock 
    		display block 
    		float left 
    		color #ff850a 
    		padding-top 11px 
    		padding-right 10px 
    		font-size 17px
    .appoint-date
        position relative
        width 100%
        padding 4px 10px 12px
        border-1px(#dcdcdc)
        box-sizing border-box
        .calendar
            width 100%
            border none
            .cell
                &:not(.blank):not(.disabled)
                    &.day
                        &:hover
                            border 1px solid #ff850a
                &.selected
                    background #ff850a
                    color #ffffff
                    border 1px solid #ff850a
                    &:hover
                        background #ff850a
                        border 1px solid #ff850a
    .appoint-btn-wrapper
        padding 6px 0
        text-align center
    .btn
        padding 10px 30px
        &.appoint-btn
            padding 10px 80px
        &.update-btn
            display inline-block
            margin-right 6px
        &.delete-btn
            display inline-block
            margin-left 6px
        &.disabled
            background-color #efefef
</style>
